<template>
	<view
		class="dish-type"
		:class="{ active: active }"
	>
		<!-- icon -->
		<image
			class="dish-type-icon"
			:src="icon"
			mode="aspectFit"
		></image>
		<!-- name -->
		<view
			class="dish-type-name"
			:class="{ active: active }"
		>
			{{ name }}
		</view>
	</view>
</template>

<script>
export default {
	name: 'DishType',
	props: {
		icon: { type: String, default: '../../static/icons/calendar.png' },
		name: { type: String, default: 'name' },
		active: Boolean,
	},
	data() {
		return {};
	},
};
</script>

<style scoped>
.dish-type {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.dish-type-icon {
	width: 78rpx;
	height: 78rpx;
}

.dish-type-name {
	height: 40rpx;
	line-height: 40rpx;

	font-size: 14px;
	color: #9a9a9a;
}

.active {
	font-weight: bold;
	color: #000;
	background-color: #fff;
}
</style>
